<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
     integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <script src="jquery-1.11.3.js"></script>
 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
     integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
     crossorigin="anonymous"></script>
     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <style>
        /* td{
            height: 100px;
            text-align: center;
            line-height: 100px;
        } */
     td>img{
         height: 50px;
        width: 50px;
     }
     </style>
</head>

<body>
        <h1 class="text-center">
            xxx商城系统后台首页.
        </h1>
    <div class="item" style="display:none;">
            用户：<span></span><input type="button" class="logout" value="返回">
            <div class="container">
                    <div class="row clearfix">
                        <div class="col-md-12 column">
                            <div class="row clearfix">
                                <div class="col-md-3 column">
                                    <h3 class="text-center" style="margin-top: 100px;">
                                        商品详情
                                    </h3>
                                </div>
                                <div class="col-md-9 column" style="margin-top: 20px;">
                                    <p>商品名称: <input type="text" value=""></p>
                                    <p>商品价格: <input type="text" value=""></p>
                                    <p>商品简介: <input type="text" value=""></p>
                                    <p>商品图片: <input type="text" value=""></p>
                                    <p> <input class="addBtn" type="button" value="添加商品"></p>
                                    <table class="table table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th>
                                                    商品名称  
                                                </th>
                                                <th>
                                                    商品价格
                                                </th>
                                                <th>
                                                    商品简介
                                                </th>
                                                <th>
                                                    商品图片
                                                </th>
                                                <th>
                                                    删除操作
                                                </th>
                                                <th>
                                                    修改操作
                                                   
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                          
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    </div>
    <div class="item" style="display:none;">
        <a href="login.html">请登录</a>
    </div>
    <script>
        let username = localStorage.getItem('username');
        let uid = localStorage.getItem('id');
        let token = localStorage.getItem('token');
        //console.log(username,uid,token);
        if(token){
            $('.item').eq(0).css({'display':'block'});
            $('span').eq(0).html(username);
            //显示商品
            cartList();
            //添加商品
            $('.addBtn').click(function(){
                let goodsAdd= `http://jx.xuzhixiang.top/ap/api/goods/goods-add.php`;
                let pname  = $('input').eq(1).val();
                let pprice  = $('input').eq(2).val();
                let pdesc  = $('input').eq(3).val();
                let pimg  = $('input').eq(4).val();
                $.ajax({
                    url:goodsAdd,
                    type:'get',
                    data:{
                       pname,
                       pprice,
                       pdesc,
                       pimg,
                       uid 
                    }
                }).then(res =>{
                    alert(res.msg);
                    cartList();
                });
            });
        }else{
            $('.item').eq(1).css({'display':'block'});
        }
        //退出按钮
        console.log($('.logout'));
        $('.logout').on('click',function(){
            console.log(111);
            localStorage.removeItem('token');
            localStorage.removeItem('username');
            alert('退出成功！！');
            location.href = 'login.html';
        })
        function cartList(){
            console.log(11)
            let cartLisrt =`http://jx.xuzhixiang.top/ap/api/productlist.php`;
            $.ajax({
                url:cartLisrt,
                type:'get',
                data:{
                    uid
                }
            }).then(res =>{
                console.log(res.data);
                let html = '';
                $.each(res.data, function(i,v){
                    console.log(v);
                    html  +=
                    `
                    <tr>
                    <td>
                        ${v.pname}
                    </td>
                    <td>
                            ${v.pprice}
                    </td>
                    <td>
                            ${v.pdesc}
                    </td>
                    <td>
                        <img src="${v.pimg}" alt="">  
                    </td>
                    <td>
                        <input type="button" data-id='${v.pid}' class="delBtn" value="删除">
                    </td>
                    <td>            
                    <!-- 按钮触发模态框 -->
                    <button data-id='${v.pid}' class="updataBtn btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                        修改
                    </button>
                    <!-- 模态框（Modal） -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" 
                                            aria-hidden="true">×
                                    </button>
                                    
                                </div>
                                <div class="modal-body">
                                    <p>商品名称: <input type="text" value=""></p>
                                    <p>商品价格: <input type="text" value=""></p>
                                    <p>商品简介: <input type="text" value=""></p>
                                    <p>商品图片: <input type="text" value=""></p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" 
                                            data-dismiss="modal">关闭
                                    </button>
                                    <button type="button" class="tjBtn btn btn-primary">
                                        提交更改
                                    </button>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->
                    </td>
                    </tr>
                `;
                })
                $('tbody').html(html);
                //删除按钮事件
                $('.delBtn').click(function(){
                    let goodsDel= `http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php`;
                    let pid = $(this).attr('data-id');
                    $.ajax({
                        url:goodsDel,
                        type:'get',
                        data:{
                            uid,
                            pid,
                            token
                        }
                    }).then(res =>{
                        $(this).parent().remove();
                        alert(res.msg);
                        cartList();
                    })
                });

                //修改按钮事件
                $('.updataBtn').click(function(){
                    let dataAPI = `http://jx.xuzhixiang.top/ap/api/detail.php`;
                    let pid = $(this).attr('data-id');
                    console.log(pid);
                    $.ajax({
                        url:dataAPI,
                        type:'get',
                        data:{
                            id:pid
                        }
                    }).then(res=>{
                        console.log(res.data);
                        $('.modal-body input').eq(0).val( res.data.pname);
                        $('.modal-body input').eq(1).val(res.data.pprice);
                        $('.modal-body input').eq(2).val(res.data.pdesc);
                        $('.modal-body input').eq(3).val(res.data.pimg);
                        //保存修改
                        $('.tjBtn').click(function(){
                            let pname = $('.modal-body input').eq(0).val();
                            let pprice = $('.modal-body input').eq(1).val();
                            let pdesc = $('.modal-body input').eq(2).val();
                            let pimg = $('.modal-body input').eq(3).val();
                            let updateAPI = `http://jx.xuzhixiang.top/ap/api/goods/goods-update.php`;
                            $.ajax({
                                url:updateAPI,
                                type:'get',
                                data:{
                                pname,
                                pprice,
                                pdesc,
                                pimg,
                                pid
                                }
                            }).then(res=>{
                                alert(res.msg);
                               location.href = 'index.html';
                            });
                        });
                    });
                });
               
            });
        }
    </script>
</body>

</html>